<template>
  <Modal v-model:visible="showModal" title="规上企业情况" width="1100px">
    <div class="flex flex-col">
      <div class="flex flex-row items-center mb-1">
        <a-select
          v-model:value="searchParams.year"
          :options="utils.genSelectOptions('year')"
          @change="loadData"
        ></a-select>
        <a-select
          v-model:value="searchParams.month"
          class="ml-1"
          :options="utils.genSelectOptions('month')"
          @change="loadData"
        ></a-select>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="(card, index) in cards"
          :key="index"
          class="card rounded-lg overflow-hidden transition-all duration-300 hover:scale-102 hover:shadow-xl"
        >
          <div class="h-1.5" :class="card.color"></div>
          <div class="p-5">
            <h2 class="text-lg font-bold text-white mb-4 flex items-center">
              <span class="w-2 h-2 rounded-full mr-2" :class="card.color"></span>
              {{ card.title }}
            </h2>

            <div class="grid grid-cols-1 gap-4">
              <!-- 企业数据块 -->
              <div class="data-box rounded-lg p-3">
                <div class="flex justify-between items-center">
                  <p class="text-gray-300 text-xs">现有企业数</p>
                  <p class="text-2xl font-bold" :class="card.textColor">{{ card.qyCount }}</p>
                </div>

                <div class="grid grid-cols-2 gap-2">
                  <div class="bg-black bg-opacity-20 rounded p-2 flex justify-between items-center">
                    <p class="text-gray-400 text-xs mb-1">同比增幅</p>
                    <p :class="getTrendClass(card.qyTb)" class="text-sm font-medium">
                      {{ card.qyTb ? card.qyTb.toFixed(2) + '%' : '/' }}
                    </p>
                  </div>
                  <div class="bg-black bg-opacity-20 rounded p-2 flex justify-between items-center">
                    <p class="text-gray-400 text-xs mb-1">环比增幅</p>
                    <p :class="getTrendClass(card.qyHb)" class="text-sm font-medium">
                      {{ card.qyHb ? card.qyHb.toFixed(2) + '%' : '/' }}
                    </p>
                  </div>
                </div>
              </div>

              <!-- 员工数据块 -->
              <div class="data-box rounded-lg p-3">
                <div class="flex justify-between items-center">
                  <p class="text-gray-300 text-xs">企业用工总数</p>
                  <p class="text-2xl font-bold" :class="card.textColor">{{ card.ygCount }}</p>
                </div>

                <div class="grid grid-cols-2 gap-2">
                  <div class="bg-black bg-opacity-20 rounded p-2 flex justify-between items-center">
                    <p class="text-gray-400 text-xs mb-1">同比增幅</p>
                    <p :class="getTrendClass(card.ygTb)" class="text-sm font-medium">
                      {{ card.ygTb ? card.ygTb.toFixed(2) + '%' : '/' }}
                    </p>
                  </div>
                  <div class="bg-black bg-opacity-20 rounded p-2 flex justify-between items-center">
                    <p class="text-gray-400 text-xs mb-1">环比增幅</p>
                    <p :class="getTrendClass(card.ygHb)" class="text-sm font-medium">
                      {{ card.ygHb ? card.ygHb.toFixed(2) + '%' : '/' }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Modal from '@/components/modal.vue'
import { Apis } from '@/api'
import { message } from 'ant-design-vue'
import * as utils from '../../utils'

const isLoading = ref(false)

const showModal = ref(false)

const searchParams = ref({
  year: '',
  month: 12,
})

let cards = ref([
  {
    title: '规模以上工业',
    qyCount: 0,
    ygCount: 0,
    ygTb: 0,
    ygHb: 0,
    qyTb: 0,
    qyHb: 0,
    color: 'bg-blue-500',
    textColor: 'text-blue-400',
  },
  {
    title: '有资质的建筑业',
    qyCount: 0,
    ygCount: 0,
    ygTb: 0,
    ygHb: 0,
    qyTb: 0,
    qyHb: 0,
    color: 'bg-blue-500',
    textColor: 'text-blue-400',
  },
  {
    title: '限额以上批发和零售业',
    qyCount: 0,
    ygCount: 0,
    ygTb: 0,
    ygHb: 0,
    qyTb: 0,
    qyHb: 0,
    color: 'bg-blue-500',
    textColor: 'text-blue-400',
  },
  {
    title: '限额以上住宿和餐饮业',
    qyCount: 0,
    ygCount: 0,
    ygTb: 0,
    ygHb: 0,
    qyTb: 0,
    qyHb: 0,
    color: 'bg-blue-500',
    textColor: 'text-blue-400',
  },
  {
    title: '房地产开发经营业',
    qyCount: 0,
    ygCount: 0,
    ygTb: 0,
    ygHb: 0,
    qyTb: 0,
    qyHb: 0,
    color: 'bg-blue-500',
    textColor: 'text-blue-400',
  },
  {
    title: '规模以上服务业',
    qyCount: 0,
    ygCount: 0,
    ygTb: 0,
    ygHb: 0,
    qyTb: 0,
    qyHb: 0,
    color: 'bg-blue-500',
    textColor: 'text-blue-400',
  },
])

function loadData() {
  isLoading.value = true
  Apis.szbt.populationQyData
    .get_getChartData({
      params: {
        year: searchParams.value.year,
        month: searchParams.value.month,
      },
    })
    .then((res) => {
      if (res?.dy?.length > 0) {
        cards.value = res.dy
      } else {
        cards = ref([
          {
            title: '规模以上工业',
            qyCount: 0,
            ygCount: 0,
            ygTb: 0,
            ygHb: 0,
            qyTb: 0,
            qyHb: 0,
            color: 'bg-blue-500',
            textColor: 'text-blue-400',
          },
          {
            title: '有资质的建筑业',
            qyCount: 0,
            ygCount: 0,
            ygTb: 0,
            ygHb: 0,
            qyTb: 0,
            qyHb: 0,
            color: 'bg-blue-500',
            textColor: 'text-blue-400',
          },
          {
            title: '限额以上批发和零售业',
            qyCount: 0,
            ygCount: 0,
            ygTb: 0,
            ygHb: 0,
            qyTb: 0,
            qyHb: 0,
            color: 'bg-blue-500',
            textColor: 'text-blue-400',
          },
          {
            title: '限额以上住宿和餐饮业',
            qyCount: 0,
            ygCount: 0,
            ygTb: 0,
            ygHb: 0,
            qyTb: 0,
            qyHb: 0,
            color: 'bg-blue-500',
            textColor: 'text-blue-400',
          },
          {
            title: '房地产开发经营业',
            qyCount: 0,
            ygCount: 0,
            ygTb: 0,
            ygHb: 0,
            qyTb: 0,
            qyHb: 0,
            color: 'bg-blue-500',
            textColor: 'text-blue-400',
          },
          {
            title: '规模以上服务业',
            qyCount: 0,
            ygCount: 0,
            ygTb: 0,
            ygHb: 0,
            qyTb: 0,
            qyHb: 0,
            color: 'bg-blue-500',
            textColor: 'text-blue-400',
          },
        ])
      }
    })
    .finally(() => {
      isLoading.value = false
    })
}

const generateRandomData = () => {
  cards.value.forEach((card) => {
    card.qyCount = Math.floor(Math.random() * 1000) + 100
    card.ygCount = Math.floor(Math.random() * 50000) + 5000

    // 生成同比增幅数据 (-20% 到 +35% 之间)
    card.qyTb = parseFloat((Math.random() * 55 - 20).toFixed(2))
    card.ygTb = parseFloat((Math.random() * 55 - 20).toFixed(2))

    // 生成环比增幅数据 (-10% 到 +15% 之间)
    card.qyHb = parseFloat((Math.random() * 25 - 10).toFixed(2))
    card.ygHb = parseFloat((Math.random() * 25 - 10).toFixed(2))
  })
}

const formatTrend = (value) => {
  if (value === 0) return '0.0%'
  return value > 0 ? `+${value.toFixed(1)}%` : `${value.toFixed(1)}%`
}

const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

const getTrendClass = (value) => {
  if (value > 0) return 'trend-up'
  if (value < 0) return 'trend-down'
  return 'trend-neutral'
}

const refreshData = () => {
  generateRandomData()
}

onMounted(() => {
  loadData()
})

defineExpose({
  setData: (data: any) => {
    const { params } = data
    searchParams.value = params
    // tableData.value = data;
  },
  open: () => {
    showModal.value = true
    loadData()
  },
})
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-neutral {
  color: #9ca3af;
}

.card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.data-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glow {
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  }

  to {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  }
}
</style>
